<template>
	<xy-loading v-if="loadingShowStatus"></xy-loading>
	<view class="h-100" v-else>
		<image src="https://resource.lanbaozixun.com/uploads/images/202409092126518791a9484.png" mode="widthFix"
			class="header"></image>
			
		<view class="tool-area">
			<image src="https://resource.lanbaozixun.com/uploads/images/20240909213412a247b4228.png" mode="heightFix" class="icon u-margin-bottom-20"></image>
			<view v-if="ProductLists.length > 0" class="u-padding-16 row wrap">
				<view class="tool-item u-padding-16 u-text-center" v-for="(v,k) in ProductLists" :key="k"  @click="openProduct(v)">
					<image :src="v.image" mode="scaleToFill" class="logo"></image>
					<view class="u-line-1 xs">{{v.title||''}}</view>
				</view>
			</view>
			<view class="u-text-center   u-padding-35" v-else>
				<u-empty text="暂无产品" mode="list"></u-empty>
			</view>
		</view>
		<u-toast ref="uToast" />
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
	</view>
</template>

<script>
	import {
		getUser
	} from '@/api/user';
	import {
		getHelpcLists
	} from '@/api/store'
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	export default {
		data() {
			return {
				id:'',
				page: 1,
				loadingShowStatus:true,
				status: loadingType.LOADING,
				ProductLists:[]
			};
		},
		onLoad(e) {
			if(!this.$u.test.isEmpty(e.id))this.id = e.id;
			this.getHelpcListsFun()
		},
		onReachBottom: function() {
			this.getHelpcListsFun();
		},
		methods:{
			isURL(url) {
			
				const strRegex = '^((https|http|ftp)://)?' //(https或http或ftp):// 可有可无
					+
					'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
					+
					'(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
					+
					'|' // 允许IP和DOMAIN（域名）
					+
					'(localhost)|' //匹配localhost
					+
					'([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
					+
					'\\w+\\.' // 一级域名 -英文或数字 加上.
					+
					'[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
					+
					'(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
					+
					'((/?)|' // url无参数结尾 - 斜杆或这没有
					+
					'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'; //请求参数结尾- 英文或数字和[]内的各种字符
				const re = new RegExp(strRegex, 'i'); // 大小写不敏感
				if (re.test(encodeURI(url))) {
					return true;
				}
				return false;
			},
			async getHelpcListsFun(){
				let {
					id,
					page,
					status,
					ProductLists
				} = this;
				loadingFun(getHelpcLists, page, ProductLists, status, {
					first_category_id: 11,
					second_category_id: id,
					page_size:100
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.loadingShowStatus = false;
						this.ProductLists = res.dataList
						this.status = res.status
					}
				})
			},
			async openProduct(info){
				const _this = this;
				if(info.type == 0){
					let {
						data,
						code
					} = await getUser()
					if (code == 1) {
						if (data.is_vip == 0) {
							_this.$refs.hintBuyVip.show()
							return false
						}
					}else{
						_this.$refs.uToast.show({
							title: '系统错误，请稍后重试',
							type: 'error'
						})
					}
				}
				
				if (info.open_type == 1 || info.open_type == 3) {
					uni.navigateTo({
						url: info.url
					})
				} else if (info.open_type == 2) {
					if (this.isURL(info.url)) {
						// #ifdef APP || MP-WEIXIN 
						uni.navigateTo({
							url: "/pages/webview/webview?url=" + info.url,
						});
						// #endif
						// #ifndef APP || MP-WEIXIN
						window.location.href = info.url;
						// #endif
					} else {
						uni.navigateTo({
							url: info.url,
							fail(e) {
								console.log(e)
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #41B2FF, #fff 43.69%);
		
		.h-100{
			min-height: 100vh;
		}
		
		.header {
			width: 90vw;
			margin: 2.5vh 0 0 10vw;
		}
		
		.tool-area{
			border-radius: 10rpx;
			background: linear-gradient(180deg, #D6EEFF, #FFFFFF 28%);
			
			.icon{
				display: block;
				height: 60rpx;
				margin: 0 auto;
			}
			
			.tool-item{
				width: 33.3%;
				
				.logo{
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>